<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>项目详情</title>
	<meta name="keywords" content="迅泊达">
	<meta name="description" content='迅泊达'/>
	<link rel="shortcut icon" href="/static/favicon.ico"/>
	<link rel="stylesheet" href="${_front_css}/base_new.css">
	<link rel="stylesheet" type="text/css" href="${_front_css}/invest_detail.css">
	<script type="text/javascript" src="${_front_js}/jquery.min.js"></script>
</head>
<body>
    <#include "../base/top.ftl" />
	<div id="project">
		<div class="project-top">
			<div class="box-left float">
				<div class="number">
					<span class="tile float"><#if borrow?exists && borrow.title?exists>${borrow.title}</#if></span>
					<i class="float">
						<#if borrow.paymentMode?exists && borrow.paymentMode == 1>
							一次性还款
						<#elseif borrow.paymentMode?exists && borrow.paymentMode == 2>
							等额本金
						<#elseif borrow.paymentMode?exists && borrow.paymentMode == 3>
							等额本息
						<#elseif borrow.paymentMode?exists && borrow.paymentMode == 4>
							按月付息,到期还本
						</#if>
					</i>
					<span class="float bh">借款编号：</span>
					<b class="float"><#if borrow.code?exists>${borrow.code}</#if></b>
				</div>
				<div class="mly">
					<div class="icon">
						<i></i>
					</div>
					<div class="bfl">
						<span class="bf"><#if borrow.percent?exists>${borrow.percent?string("0.0")}</#if></span>
						<b class="bl"><#if borrow.rewardPercent?exists>+${borrow.rewardPercent}</#if>%</b>
						<span class="br">年利率</span>
					</div>
					<div class="qx">
						<b class="bck"><#if borrow.deadline?exists>${borrow.deadline}</#if></b>
						<span class="txt">
							<#if borrow.dateUtil?? && borrow.dateUtil = 'MONTH'>
								个月
							<#elseif borrow.dateUtil?? && borrow.dateUtil = 'DAY'>
								天
							</#if>
						</span>
						<span class="br">期限</span>
					</div>
					<div class="jine">
						<span class="bf bck"><#if borrow.amount?exists>￥${borrow.amount?string("0.00")}</#if></span>
						<span class="br">标的总额</span>
					</div>
				</div>
				<div class="timer">
					<div class="timers">
						<span>剩余时间：<time id="timer"></time></span>
					</div>
					<div class="over">
						<span>剩余可投金额：</span><span class="gr"><#if borrow.notTenderMoney?exists>￥${borrow.notTenderMoney?string("0.00")}</#if></span><span>元</span>
					</div>
					<div class="datatj">
						<div><span style="width:${borrow.schedules}%;"></span></div>
						<span class="rt"><#if borrow.schedules?exists>${borrow.schedules}</#if>%</span>
					</div>
				</div>
			</div>
			<div class="box-right float">
				<div class="state clear">
					<span>账号余额：
						<b>
							<#if _user??>
								<#if userAccount?? && userAccount.balance?exists>
									${userAccount.balance}
								</#if>
							<#else>
								不可见
							</#if></b></span>
					<a href="<#if _user??>javascript:;<#else>/login</#if>"><#if _user??>${_user.username}<#else>登录</#if></a>
				</div>
				<input class="text" type="text" id="money" onmouseout="getValue()" placeholder="投标金额" />
				<div class="profit">
					<span>预期收益：<b id="income">0</b>元</span>
				</div>
				<#if _user??>
					<input class="btn" type="button" id="tender-btn"value="立即投标" />
				<#else>
					<input class="btn" type="button" id="login" value="立即登录" />
				</#if>
				
			</div>
		</div>

		<div class="project-bottom">
			<ul>
				<li class="project-on"><a href='#tab1'>项目介绍</a></li>
				<li><a href='#tab2'>项目资料</a></li>
				<li><a href='#tab3'>投标记录</a></li>
				<li><a href='#tab4'>还款记录</a></li>
			</ul>
			<div class="content-box">
				<div class="content-list">
					<!-- 项目介绍 -->
					<div class="first" id="tab1">
						<p class="tle">一：项目介绍</p>
						<span class="content_one"><#if borrow.descr?exists>${borrow.descr}</#if></span>
					</div>
					<!-- 相关资料 -->
					 <div class="qualificationCheck" id="tab2"> 
					 		<p>二：项目资料</p>
				        	<a class="prev btn" href="javascript:void(0)"></a>
				            <a class="next btn" href="javascript:void(0)"></a> 
				            <div class="scrollWrap">
				            	<div class='img_box' id="scroller_roll1">
					                <ul class="pictureList" id="photosDemo" style='height:170px;'>
					        	        <#if (attachmentResources?size > 0)>
											<#list attachmentResources as item>
						                		<li style='width:175px;height:170px;'>
								                    <img src="${item.path}" width='100%' height='100%' alt="">
							                    </li>
											</#list>
										</#if>	            
					                </ul> 
				                </div>     
				            </div>  
				    </div>
				    
					<!-- 投标记录 -->
					<div class="first" id="tab3">
						<p class="tle">三：投标记录</p>
						<div class="record">
							<div id='first_get' class='lend_medal pr w306  fl h72 first_lend'>
									<div id="first_tender" class='w180 ml120 mt10'>
										<#if first?? && first.username?exists>
											<span class='black-level4 db '>拥有者</span>
											<span class='f16 b'>
												${first.username}
											</span>
										</#if>
									</div>
								<div id='first_lend' style="top: 0px; left: 75px;" class='w160 pa mt12 ml35 b back_white '>
									本项目第一个投标成功的用户可获得此称号
								</div>
							</div>
							<div id='most_get' class='lend_medal w306  pr ml20 fl h72 most_lend'>
									<div  id="most_tender" class='w180 ml120 mt10'>
										<#if most?? && most.username?exists>
											<span class='black-level4 db '>拥有者</span>
											<span class='f16 b'>${most.username}</span>
										</#if>
									</div>
								<div id='most_lend' style="top: 0px; left: 75px;" class='w160 pa mt12 ml35 b back_white '>
									本项目投资最多的用户可获得此称号
								</div>
							</div>
							<div id='last_get' class='lend_medal w306  pr fr h72 last_lend'>
									<div id="last_tender" class='w180 ml120 mt10'>
										<#if decision?? && decision.username?exists>
											<span class='black-level4 db '>拥有者</span>
											<span class='f16 b'>${decision.username}</span>
										</#if>
									</div>
								<div id='last_lend' style="top: 0px; left: 75px;" class='w160 pa mt12 ml35 b back_white '>
									本项目最后一个投标成功的用户可获得此称号
								</div>
							</div>
							<div class='clear'></div>	
							<table cellpadding="0" cellspacing="0" class='tz'>
			                	<thead>
			                		<tr>
			                			<th>投资人</th>
			                			<th>投标金额</th>
			                			<th>投标类型</th>
			                			<th>投标时间</th>
			                		</tr>
			                	</thead>
			                	<tbody id="resultList">
			                			<#if pageInfo??>
				                	        <#if (pageInfo.pageList?size > 0)>
												<#list pageInfo.pageList as item>                	
							                		<tr>
							                			<td>${item.tenderUserName[0.1]}**</td>
							                			<td>${item.amount?string('0.00')}元</td>
							                			<td>
							                				<#if item.isAuto=="Y">
							                					自动
							                				<#else>
							                					手动
							                				</#if>
							                			</td>
							                			<td>${item.createTime?string("yyyy-MM-dd HH:mm:ss")}</td>
							                		</tr>
				                				</#list>
				                			<#else>
				                					<tr>
				                						<td colspan="4" style=" width:1150px;align:center">暂无记录</td>
				                					</tr>	
											</#if>
										</#if>		
			                	</tbody>
			                </table> 
						</div>
					</div>
					<!-- 还款记录 -->
					<div class="first" id="tab4">
						<p class="tle">四：还款记录</p>
						<div class="record">
							<table cellpadding="0" cellspacing="0" class="hkjl">
			                	<tbody>
			                		<tr>
			                			<th>期数</th>
			                			<th>还款日期</th>
			                			<th>已还本息</th>
			                			<th>待还本息</th>
			                			<th>已付罚息</th>
			                			<th>待还罚息</th>
			                			<th>状态</th>
			                		</tr>
				                		<#if paymentList??>
				                	        <#if (paymentList?size > 0)>
												<#list paymentList as item>      
												  <tr>
					                				<td>
					                						${item.periodIndex}
					                				</td>
						               				<td>
					                						${item.expectDate?string("yyyy-MM-dd")}
						               				</td>
						               				<td>
					                						￥${item.paymentTotal?string('0.00')}
						               				</td>
						               				<td>
					                						￥${item.notPaymentTotal?string('0.00')}
						               				</td>
						               				<td>
						               						￥0.00
						               				</td>
						               				<td>
						               						￥0.00
						               				</td>
						               				<td>
						               					    <#if item.status=='Y'>
						               					    	已还款
						               					    <#else>
						               					    	未还款	
						               					    </#if>
						               				</td>
						               			  </tr>
												</#list>
											<#else>
												<tr>
				                						<td colspan="7" style=" width:1150px;align:center">暂无记录</td>
				                					</tr>
											</#if>
										</#if>		                			
			                	</tbody>
			                </table>     
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="tcc-nav hide" id='top-nav'>
		<div class="rows">
			<ul id="headerNav" class="nav">   
				<li><a href="#tab1" name="jilu" class="active">项目详情</a></li>
				<li><a href="#tab2" name="projectMs">项目资料</a></li>
				<li><a href="#tab3" name="message">投标记录</a></li>
				<li><a href="#tab4" name="record">还款记录</a></li>
			</ul>
			<div class="pull-right btn">
				<a href="#" class="btn-one">立即投资</a>
			</div>
		</div>
	</div>
	
<!-- 底部 start -->
<#include "../base/foot.ftl" />
<!-- 底部 end -->
<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
<script type="text/javascript" src="${_front_js}/layer/extend/layer.ext.js" ></script>
<script type="text/javascript" src="/static/front/js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="${_front_js}/raphael.js" ></script>
<script type="text/javascript" src="${_front_js}/drawCircle.js" ></script>
<script type="text/javascript" src="${_front_js}/products.js"></script>
<script type="text/javascript">
jQuery(".qualificationCheck").slide({
	titCell: ".qualificationCheck ul",
	mainCell: ".qualificationCheck ul",
	autoPage: true,
	effect: "leftLoop",
	autoPlay: true,
	vis: 5,
	trigger: "click"
});
</script>  
<script type="text/javascript">
	jQuery(".qualificationCheck").slide({mainCell:".pictureList",effect:"leftLoop",trigger:"click",vis:4,autoPlay:true,delayTime:700,interTime:4500});	
		 function tabaccordion(index){
		 for (var i=1;i<6;i++)
	      {
			  $('#tablist'+i).hide();
		  }
		  $('#tablist'+index).show(1000);
	 	}
		;!function(){

		layer.ready(function(){     
		    //使用相册
		    layer.photos({
		        photos: '#photosDemo'
		    });
		});

		}();
	
	$(window).scroll(function() {
  		var top=$(window).scrollTop();
  		if(top>=200){
  			$(".tcc-nav").hide();
  			$(".tcc-nav").show();		
  		}else{
  			$(".tcc-nav").show(); 
  			$(".tcc-nav").hide(); 			
  		}
	});
	
	$(".tcc-nav ul li a").click(function(){
		$(".tcc-nav ul li").find('.active').removeClass('active');
		$(this).addClass('active');
	})

	function getValue(){
		var amount = $("#money").val();
		var period = "<#if borrow.deadline?exists>${borrow.deadline}</#if>";
		var periodUnit = "<#if borrow.dateUtil?exists>${borrow.dateUtil}</#if>"
		var rate = "<#if borrow.percent?exists>${borrow.percent?string("0.0")}</#if>";
		var interestMethod = "<#if borrow.paymentMode?exists>${borrow.paymentMode}</#if>";
		if(amount==""){
			return ;
		}
		$.ajax({
			type: 'POST',
            url:  '/calculator',
            data: {money:amount,period:period,periodUnit:periodUnit,
					yearRate:rate,interestMethod:interestMethod},
            async: false,
            success: function(result) {
            	var data = result.entity;
            	document.getElementById("income").innerHTML = data.totleInterest;
            }
        })
	} 
	
	$("#tender-btn").click(function(){		
        var borrowId = ${borrow.id};
        var uid = "<#if _user??>${_user.id}</#if>";
        var amount=$.trim($("#money").val());
        if(amount == ""){
            alert("投资金额不能为空！")
            return ;
       }
       $.ajax({
            type: "post", 
            dataType: "json", 
            url: "/front/tender/save",
            data: {
                "borrowId":borrowId,
                "amount":amount
            }, 
            success: function (result) { 
                if(result.code == -1){
                	window.location.href="/hf/user/tender?bid="+borrowId+"&balance="+amount+"&uid="+uid;
                }else{
                	layer.alert(result.msg,function(index){
                		layer.close(index);
                		window.location.reload();
                	});
                }
            }
       })
	})
	
	$("#login").click(function(){
		window.location.href="/login";
	})
	
	
	 function timer(){
		var time = '<#if borrow.expireTime?exists>${borrow.expireTime?string("yyyy-MM-dd HH:mm:ss")}</#if>';
		time = time.replace(/-/g,"/");
		time = new Date(time);
		var now = new Date().getTime();
		var diffValue = time - now;
		if(diffValue>0){
			var dd = parseInt(diffValue / 1000 / 60 / 60 / 24, 10);//计算剩余的天数  
        	var hh = parseInt(diffValue / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数  
       	 	var mm = parseInt(diffValue / 1000 / 60 % 60, 10);//计算剩余的分钟数  
        	var ss = parseInt(diffValue / 1000 % 60, 10);//计算剩余的秒数  
            dd = checkTime(dd);  
            hh = checkTime(hh);  
            mm = checkTime(mm);  
            ss = checkTime(ss);  
            document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒"; 
            if(dd==0 && hh==0 && mm==0 & ss==0){

            }
            setTimeout("timer()",1000);
		}else{
			document.getElementById("timer").innerHTML = "已过期"; 				
		}
    }
    function checkTime(i){    
           if (i < 10) {    
               i = "0" + i;    
            }    
           return i;    
          }   
  window.onlod=timer();

	$(".project-bottom ul li").click(function(){
	  	$(".project-on").removeClass("project-on");
	  	$(this).addClass("project-on");
  	})
  	
  	
  	var first = "<#if first?? && first.username?exists>${first.username}</#if>";
	if(first != null && first != ""){
		document.getElementById("first_get").style.backgroundPosition='0px 1px';
		document.getElementById("first_tender").style.display='block';
		
		document.getElementById("first_get").onmouseover=function(){
			document.getElementById("first_get").onmouseover=function(){
				document.getElementById("first_tender").style.display='none';
				document.getElementById("first_lend").style.marginLeft='110px';
				document.getElementById("first_lend").style.display='block';
			};
			document.getElementById("first_get").onmouseout=function(){
				document.getElementById("first_lend").style.display='none';
				document.getElementById("first_tender").style.display='block';
			};
		};
	}else{
		document.getElementById("first_get").onmouseover=function(){
			document.getElementById("first_lend").style.display='block';
		};
		document.getElementById("first_get").onmouseout=function(){
			document.getElementById("first_lend").style.display='none';
		};
	}
	
	
	var most = "<#if most?? && most.username?exists>${most.username}</#if>";
	if(most != null && most != ""){
		document.getElementById("most_get").style.backgroundPosition='0px -73px';
		document.getElementById("most_tender").style.dispaly='block';
		document.getElementById("most_get").onmouseover=function(){
			document.getElementById("most_tender").style.display='none';
			document.getElementById("most_lend").style.marginLeft='110px';
			document.getElementById("most_lend").style.display='block';
		};
		document.getElementById("most_get").onmouseout=function(){
			document.getElementById("most_lend").style.display='none';
			document.getElementById("most_tender").style.display='block';
		};
	}else{
		document.getElementById("most_get").onmouseover=function(){
			document.getElementById("most_lend").style.display='block';
		};
		document.getElementById("most_get").onmouseout=function(){
			document.getElementById("most_lend").style.display='none';
		};
	}
	
	var end = "<#if decision?? && decision.username?exists>${decision.username}</#if>";
	if(end != null && end != ""){
		document.getElementById("last_get").style.backgroundPosition='0px -144px';
		document.getElementById("last_tender").style.dispaly='block';
		document.getElementById("last_get").onmouseover=function(){
			document.getElementById("last_tender").style.display='none';
			document.getElementById("last_lend").style.marginLeft='110px';
			document.getElementById("last_lend").style.display='block';
		};
		document.getElementById("last_get").onmouseout=function(){
			document.getElementById("last_lend").style.display='none';
			document.getElementById("last_tender").style.display='block';
		};
	}else{
		document.getElementById("last_get").onmouseover=function(){
			document.getElementById("last_lend").style.display='block';
		};
		document.getElementById("last_get").onmouseout=function(){
			document.getElementById("last_lend").style.display='none';
		};
	}
	
	var errorMsg="<#if RespDesc?exists>${RespDesc}<#else></#if>";
	if(errorMsg != null && errorMsg !=""){
		layer.alert(errorMsg);
	}
</script>
</body>
</html>